import { useEffect } from "react"
import { Button, Form, Input, message } from "antd"
// 路由接口
import { addSettings, getOneData, hospitalModify } from "@api/hospitalSet"
// hook
import { useNavigate, useLocation, useParams } from "react-router-dom"
// 类型约束
import { hospitalAdd } from "@api/hospitalSet/model"
import "./add.less"

function Add() {
  const [form] = Form.useForm()
  const navigate = useNavigate()

  // 接收编程式导航传递的state数据
  const location: any = useLocation()
  const id = location.state?.id

  // 挂载
  useEffect(() => {
    // 根据id判断是否需要发送请求,异步，包在函数内await卡一下
    const getOne = async () => {
      if (location.state) {
        // const id = +location.search.split("?")[1]  获取id
        // const result = await getOneData(id)  直接将当前数据传递过来，可以不用发送请求传递
        // setFieldsValue	设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）
        form.setFieldsValue(location.state)
      }
    }
    getOne()
  }, [form])

  // 根据有无id判断是修改还是添加
  const preservation = async (values: hospitalAdd) => {
    // 根据id判断进行哪一个操作
    if (location.state) {
      // 有id则为修改,修改会多一个id需要传入
      await hospitalModify({ ...values, id })
    } else {
      // 没有id为添加
      await addSettings(values)
    }
    message.success(`${id ? "修改" : "添加"}成功`)
    goBack()
  }

  // 返回到医院设置
  const goBack = () => {
    navigate("/syt/hospital/hospitalSet")
  }
  return (
    // onFinish会在submit的时候触发
    <Form
      form={form}
      name="basic"
      onFinish={preservation}
      labelCol={{ flex: "110px" }}
      labelAlign="left"
      labelWrap
      wrapperCol={{ flex: 1 }}
      colon={false}
      className={"alignment"}
    >
      <Form.Item
        label="医院名称:"
        labelAlign="right"
        name="hosname"
        rules={[{ required: true, message: "请输入医院名称" }]}
      >
        <Input width={120} />
      </Form.Item>
      <Form.Item
        label="医院编号:"
        labelAlign="right"
        name="hoscode"
        rules={[{ required: true, message: "请输入医院编号" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="api基础路径:"
        name="apiUrl"
        labelAlign="right"
        rules={[{ required: true, message: "请输入api基础路径" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="联系人姓名:"
        name="contactsName"
        labelAlign="right"
        rules={[
          {
            required: true,
            message: "请输入联系人姓名",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="联系人手机:"
        name="contactsPhone"
        labelAlign="right"
        rules={[
          {
            required: true,
            message: "请输入正确的手机号",
            pattern: /^1[3-9]\d{9}$/,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item label=" ">
        <Button
          type="primary"
          htmlType="submit"
          className="interval"
          // onClick={preservation}
        >
          保存
        </Button>
        <Button onClick={goBack}>取消</Button>
      </Form.Item>
    </Form>
  )
}

export default Add
